<template>
    <div class="side-bar">
        <!-- 侧边栏菜单 -->
        <div class="side-menu">
            <van-sidebar v-model="currentSideActive" @change="onSideMenuChange">
                <template v-for="(item, index) in menuData" :key="index">
                    <van-sidebar-item :title="item.label" />
                </template>
            </van-sidebar>
        </div>
        <!-- 内容区域 -->
        <div class="side-content">
            <slot name="content">
                <template v-if="menuData[currentSideActive].items"
                    v-for="(item, index) in menuData[currentSideActive]?.items" :key="index">
                    <div :class="['list-item', item.isSelect ? 'active' : '']"
                        @click="handleItemClick(currentSideActive, index)">
                        <div class="name ellipsis-text-1">{{ item?.label }}</div>
                        <span class="desp">
                            {{ item?.percentageUser }}
                        </span>
                    </div>
                </template>

                <!-- 二级列表 -->
                <template v-if="getSubSide.length">
                    <div class="sub-side-panel">
                        <div class="sub-side-bar">
                            <van-sidebar v-model="currentSubSideActive" @change="onSubSideMenuChange">
                                <template v-for="(group, indey) in menuData[currentSideActive].subGroups" :key="indey">
                                    <van-sidebar-item :title="group.label" />
                                </template>
                            </van-sidebar>
                        </div>
                        <div class="sub-content">
                            <template v-for="(addr, indz) in getSubSideItems" :key="indz">
                                <div :class="['list-item', addr.isSelect ? 'active' : '']"
                                    @click="handleItemClick(currentSideActive, indez)">
                                    <div class="name ellipsis-text-1">{{ addr?.label }}</div>
                                    <span class="desp">
                                        {{ addr?.percentageUser }}
                                    </span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </slot>
        </div>
    </div>
</template>

<script setup>
import { computed } from "vue";
import { ref } from "vue";

const props = defineProps({
    menuData: {
        type: Array,
        default: () => [],
    },
});

const currentSideActive = ref(0);
const currentSubSideActive = ref(0);

// 处理侧边栏菜单点击事件
const onSideMenuChange = (index) => {
    console.log(`标签名 ${currentSideActive.value}`);
};

// 处理二级侧边栏菜单点击事件
const onSubSideMenuChange = (index) => {
    console.log(`二级标签名 ${currentSubSideActive.value}`);
};

//  处理内容区域点击事件
const handleItemClick = (sideIndex, itemIndex) => {
    // 处理点击事件，更新选中状态
    props.menuData[sideIndex].items.forEach((item, index) => {
        item.isSelect = index === itemIndex;
    });
};

// 获取当前侧边栏的二级菜单项
const getSubSideItems = computed(() => {
    return props.menuData[currentSideActive.value]?.subGroups[currentSubSideActive.value]?.items || [];
})
// 获取二级侧边栏的内容
const getSubSide = computed(() => {
    return props.menuData[currentSideActive.value]?.subGroups || [];
})
</script>

<style lang="less" scoped>
@popupHeight: 500px;

// .side-bar :deep(.van-siderbar) {
//     height: calc(@popupHeight - 60px);
// }

.side-bar :deep(.van-sidebar) {
    height: 100% !important; // 覆盖原有固定高度
}

.side-menu {
    height: 100%;
}

.side-bar {
    display: flex;
    flex-direction: row;
    height: 500px; // 根据实际需求设置固定高度
    max-height: 100vh; // 可选：限制最大高度不超过视口

    .side-content {
        flex: 1;
        overflow-y: auto; // 已存在，确保此属性存在
        height: 100%; // 新增：继承父容器高度
        background-color: #fff;

        .list-item {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 55px;
            font-size: 14px;
            padding: 0 20px 0 10px;
            margin-right: 20px;
            margin-left: 12px;

            .name {
                padding-bottom: 6px;
            }

            .desp {
                font-size: 12px;
                color: #999;
            }
        }
    }
}

.active {
    background-color: #fffcf5;

    .name {
        color: var(--primary-color);
    }
}

.sub-side-panel {
    display: flex;
    flex-direction: row;
    height: 100%;
    background-color: #fff;
    overflow: hidden; // 新增：隐藏溢出内容
    overflow-y: auto;

    .sub-side-bar {
        border: 1px solid #eee;
    }

    .sub-side-bar :deep(.van-sidebar) {
        .van-sidebar-item {
            background-color: white !important;
        }
    }

    .sub-content {
        flex: 1;
        height: 100%;
        overflow: hidden;
        overflow-y: scroll;
        overflow-x: hidden;

        // 点击内容背景色修改
        .list-item {
            background-color: #fff;

            &:hover {
                background-color: #fffcf5;
                color: var(--primary-color);
            }
        }
    }
}
</style>
